<template>
  <d2-container>
    <div class="app-container h-full">
      <el-container class="h-full">
        <el-aside class="tree-area" @contextmenu.prevent.native = "showMenu('',$event)">
          <el-tree
            class="h-full"
            highlight-current
            node-key="buildingId"
            :data="dataList"
            :props="menuListTreeProps"
            @node-click="selectBuild"
            @node-contextmenu="rightClick"
            default-expand-all
            :expand-on-click-node="false"
          ></el-tree>
          <!--鼠标右键点击出现菜单-->
          <div v-show="menuVisible">
            <el-menu
              id="rightClickMenu"
              class="el-menu-vertical"
              background-color="#f2f2f2"
              active-text-color="#666666"
              text-color="#666666"
              @select="handleRightSelect"
            >
              <el-menu-item index="0" class="menuItem" v-if="updateMenuNode==''">
                <span slot="title">新建一级区域</span>
              </el-menu-item>
              <el-menu-item index="1" class="menuItem"v-if="updateMenuNode!=''">
                <span slot="title">新建子区域</span>
              </el-menu-item>
              <el-menu-item index="3" class="menuItem" v-if="updateMenuNode!=''">
                <span slot="title">删除区域</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
        <el-main class="theme-front-color ml-4">
          <div style="border-bottom: solid 1px black;padding-bottom: 20px">
            <span style="font-size: large"><b>区域信息</b></span>
            <span>
              <el-button
                v-if="showInfo"
                class="filter-item"
                style="float: right"
                icon="el-icon-edit"
                size="small"
                @click="showInfo=false"
              ></el-button>
              <el-button
                v-else
                class="filter-item"
                style="float: right"
                icon="el-icon-check"
                size="small"
                @click="saveBuild"
              ></el-button>
            </span>
            <div v-if="showInfo">
              <el-row :span="24" style="margin-top: 20px">
                <el-col :span="8">区域名称: {{currentbuildInfo.buildingName}}</el-col>
                <el-col :span="8">关联项目: {{currentbuildInfo.projectId |projectName(projectList)}}</el-col>
                <el-col :span="8">碳排目标值(tCO2e): {{currentbuildInfo.co2Target}}</el-col>

              </el-row>
              <el-row :span="24" style="margin-top: 20px">
                <el-col :span="8">区域面积(平方米): {{currentbuildInfo.buildingArea}}</el-col>
                <el-col :span="8">容纳人数: {{currentbuildInfo.buildingPersons}}</el-col>
                <el-col
                  :span="8"
                >区域类型: {{currentbuildInfo.buildingType |buildTypeName(buildTypeList)}}</el-col>
              </el-row>
            </div>
            <div v-else>
              <el-form
                :model="currentbuildInfo"
                :rules="dataRule"
                ref="currentbuildInfo"
                label-width="150px"
                size="small"
              >
                <el-row :span="24" style="margin-top: 20px">
                  <el-col :span="8">
                    <el-form-item label="区域名称" prop="buildingName">
                      <el-input
                        v-model="currentbuildInfo.buildingName"
                        placeholder="区域名称"
                        maxlength="100"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="容纳人数" prop="buildingPersons">
                      <el-input
                        v-model="currentbuildInfo.buildingPersons"
                        placeholder="容纳人数"
                        maxlength="11"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="区域面积(平方米)" prop="buildingArea">
                      <el-input
                        v-model="currentbuildInfo.buildingArea"
                        placeholder="区域面积(平方米)"
                        maxlength="100"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :span="24" style="margin-top: 20px">
                  <el-col :span="8">
                    <el-form-item label="区域类型">
                      <el-select v-model="currentbuildInfo.buildingType">
                        <el-option
                          v-for="item in buildTypeList"
                          :key="item.paramValue" :label="item.paramValue" :value="item.paramKey"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="项目编号">
                      <el-select v-model="currentbuildInfo.projectId" filterable>
                        <el-option
                          v-for="item in projectList"
                          :key="item.projectId"
                          :label="item.projectName+'['+item.projectId+']'"
                          :value="item.projectId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="碳排目标值(tCO2e)">
                        <el-input
                          v-model="currentbuildInfo.co2Target"
                          placeholder="碳排目标值"
                          maxlength="10"
                        ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div style="display:flow-root;margin-top: 20px;">
            <div style="font-size: large;display:inline-block;line-height:35px; float:left;"><b>计量器信息</b></div>
            <div style="display:inline-block; float:right;">
              <el-input
                v-model="dataForm.deviceName"
                placeholder="计量器名称"
                style="width: 150px;"
                class="filter-item"
                clearable
                @keyup.enter.native="getmeterDataList(true)"
                size="small"
              />
              <el-input
                v-model="dataForm.meterCode"
                placeholder="计量器编码"
                style="width: 150px;"
                class="filter-item ml-2"
                clearable
                @keyup.enter.native="getmeterDataList(true)"
                size="small"
              />
              <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="getmeterDataList(true)"
                size="small"
              >查询</el-button>
              <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-edit"
                @click="addOrUpdateHandlemeter('')"
                size="small"
              >新增</el-button>
              <el-button  type="danger" @click="deleteHandlemeter()" :disabled="dataListSelections.length <= 0" size="small">批量删除</el-button>
            </div>
          </div>
          <div style="margin-top:20px;">
            <el-table
              :data="meterdataList"
              border
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              style="width: 100%;"
            >
              <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
              <!-- <el-table-column prop="id" header-align="center" align="center"  width="50" label="ID"></el-table-column>
              <el-table-column
                prop="buildingId"
                header-align="center"
                align="center"
                width="100"
                label="区域ID"
              ></el-table-column>
              <el-table-column
                prop="buildingName"
                header-align="center"
                align="center"
                label="区域名称"
              ></el-table-column> -->
              <el-table-column
                prop="deviceName"
                header-align="center"
                align="center"
                label="计量器名称"
              ></el-table-column>
              <el-table-column
                prop="meterCode"
                header-align="center"
                align="center"
                label="计量器编码"
              >
                <template slot-scope="scope">{{scope.row.meterCode |materName(meterInfoList)}}</template>
              </el-table-column>
              <el-table-column
                prop="parentDevice"
                header-align="center"
                align="center"
                label="上级计量器信息"
              ></el-table-column>
              <el-table-column
                prop="meterType"
                header-align="center"
                align="center"
                width="120"
                label="计量器类型"
              >
                <template slot-scope="scope">{{scope.row.meterType |meterTypeName(meterTypeList)}}</template>
              </el-table-column>
              <el-table-column
                prop="subitemType"
                header-align="center"
                align="center"
                width="120"
                label="采集类型"
              >
                <template slot-scope="scope">{{scope.row.subitemType |meterTypeName(subitemTypeList)}}</template>
              </el-table-column>
              <el-table-column
                prop="subitemValue"
                header-align="center"
                align="center"
                width="120"
                label="采集分类"
              >
                <template
                  slot-scope="scope"
                >{{scope.row.subitemValue |meterTypeName(subitemValueList)}}</template>
              </el-table-column>
              <!-- <el-table-column
                prop="parentMeterCode"
                header-align="center"
                align="center"
                label="入口线路计量器编码"
                width="150"
              >
                <template slot-scope="scope">{{scope.row.parentMeterCode | materName(meterInfoList)}}</template>
              </el-table-column> -->
              <el-table-column
                header-align="center"
                align="center"
                width="150"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="view(scope.row)">查看</el-button>
                  <el-button type="text" size="small" @click="addOrUpdateHandlemeter(scope.row.id)">修改</el-button>
                  <el-button type="text" size="small" @click="deleteHandlemeter(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="mt-4"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
      <el-dialog
        :title="opmenuTitle"
        :visible.sync="menuVisibledialog"
        width="20%"
        :before-close="closeMenuVisibledialog"
      >
        <el-form :model="form">
          <el-form-item label="区域名称" label-width="80px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="menuVisibledialog = false">取消</el-button>
          <el-button type="primary" @click="createChildNodeOrUpdate()">提交</el-button>
        </div>
      </el-dialog>
      <add-or-updatemeter
        v-if="addOrUpdateVisiblemeter"
        ref="addOrUpdatemeter"
        @refreshDataList="getmeterDataList"
      ></add-or-updatemeter>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!-- 查看详情 -->
      <view-meter v-if="viewVisile" :visible="viewVisile" @closeView="closeViewVisible()" :meter="viewData"></view-meter>
    </div>
  </d2-container>
</template>

<script>
import AddOrUpdate from "./ecsbuildinginfo-add-or-update";
import AddOrUpdatemeter from "./ecsbuildingmeter-add-or-update";
import ViewMeter from './ecsbuildingmeter-view'
import TableTreeColumn from "@/components/table-tree-column";
import { treeDataTranslate } from "@/utils";
import * as Util from "@/utils";
export default {
  name: 'ecs_ecsbuildinginfo',
  data() {
    return {
      updateMenuNode:'',
      dataForm: {
        meterCode: "",
        deviceName:''
      },
      form: {
        name: ""
      },
      dataFormBuild: {
        buildingId: "",
        buildingName: "",
        parentBuildingId: "-1",
        buildingType: "",
        buildingArea: "",
        buildingPersons: "",
        projectId: "",
        parentBuildingName: ""
      },
      showInfo: true,
      treeHeight: 200,
      containerHeight: 300,
      menuVisible: false,
      dataLoading: false,
      opmenuTitle: "新建",
      menuVisibledialog: false,
      dataList: [],
      meterdataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      addOrUpdateVisiblemeter: false,
      buildTypeList: [],
      projectList: [],
      menuListTreeProps: {
        label: "buildingName",
        children: "children"
      },
      currentNode: "",
      meterTypeList: [],
      subitemTypeList: [],
      subitemValueList: [],
      meterInfoList: [],
      currentbuildInfo: {},
      dataRule: {
        buildingName: [
          { required: true, message: "区域名称不能为空", trigger: "blur" }
        ],
        parentBuildingId: [
          { required: true, message: "所属区域不能为空", trigger: "blur" }
        ],
        buildingType: [
          { required: true, message: "区域类型不能为空", trigger: "blur" }
        ],
        buildingArea: [
          { required: true, message: "区域面积不能为空", trigger: "blur" }
        ],
        buildingPersons: [
          { required: true, message: "容纳人数不能为空", trigger: "blur" }
        ],
        projectId: [
          { required: true, message: "项目编号不能为空", trigger: "blur" }
        ]
      },
      viewVisile:false,
      viewData:{},
    };
  },
  components: {
    TableTreeColumn,
    AddOrUpdate,
    AddOrUpdatemeter,
    ViewMeter
  },
  filters: {
    buildTypeName: function(value, statusList) {
      for (let i = 0; i < statusList.length; i++) {
        if (statusList[i].paramKey === value) {
          return statusList[i].paramValue;
        }
      }
    },
    projectName: function(value, statusList) {
      for (let i = 0; i < statusList.length; i++) {
        if (statusList[i].projectId === value) {
          return (
            statusList[i].projectName + "[" + statusList[i].projectId + "]"
          );
        }
      }
    },
    statusName: function(value, statusList) {
      for (let i = 0; i < statusList.length; i++) {
        if (statusList[i].value === value) {
          return statusList[i].label;
        }
      }
    },
    meterTypeName: function(value, statusList) {
      for (let i = 0; i < statusList.length; i++) {
        if (statusList[i].paramKey === value) {
          return statusList[i].paramValue;
        }
      }
    },
    materName: function(value, statusList) {
      for (let i = 0; i < statusList.length; i++) {
        if (statusList[i].meterCode === value) {
          return statusList[i].meterCode + "[" + statusList[i].meterAddr + "]";
        }
      }
    }
  },
  activated() {
    this.queryStatic("METER_TYPE");
    this.queryStatic("SUBITEM_TYPE");
    this.queryStatic("SUBITEM_VAL");
    this.getMeterDataList();
    this.setContentHeight();
    this.queryStatic("BUILDING_TYPE");
    this.getProjectDataList();
    this.getDataList();
  },
  computed:{
    tableHeight(){
      return Util.getClientHeight()-410;
    }
  },
  methods: {
    showMenu(item,event){
      // debugger
      // parameter.preventDefault()
      // var x = parameter.clientX
      // var y = parameter.clientY
       this.rightClick(event, item,'1')

    },

    closeViewVisible(){
      this.viewVisile = false;
    },
    view(row){
      this.viewData = row;
      this.viewData.meterCodeName =this.viewData.meterCode
      //this.viewData.meterCodeName =this.viewData.meterCode+"["+ this.meterInfoList.find(item=>item.meterCode==this.viewData.meterCode).meterAddr+"]";
      this.viewData.meterTypeName =this.meterTypeList.find(item=>item.paramKey==this.viewData.meterType).paramValue;
     // console.log(this.subitemTypeList,this.viewData.subitemType);
     // console.log(this.subitemValueList,this.viewData.subitemValue);
      this.viewData.subitemTypeName="";
      if(this.viewData.subitemType && this.viewData.subitemType!=""){
         this.viewData.subitemTypeName =this.subitemTypeList.find(item=>item.paramKey==this.viewData.subitemType).paramValue;
      }
      this.viewData.subitemValueName="";
      if(this.viewData.subitemValue!='0' && this.viewData.subitemValue!=""){
        this.viewData.subitemValueName =this.subitemValueList.find(item=>item.paramKey==this.viewData.subitemValue).paramValue;
      }
    //  console.log(this.viewData);
      this.viewVisile = true;
    },
    //保存修改区域信息
    saveBuild() {
      if (!this.currentNode || this.currentNode === "") {
        this.$message({
          message: "请先选择区域",
          type: "warning"
        });
        return;
      }
      this.$refs["currentbuildInfo"].validate(valid => {
        if (valid) {
          this.$api.okhttp({
            url: this.$http.adornUrl(`/ecs/ecsbuildinginfo/update`),
            method: "post",
            data: this.$http.adornData({
              buildingId: this.currentbuildInfo.buildingId || undefined,
              buildingName: this.currentbuildInfo.buildingName,
              parentBuildingId: this.currentbuildInfo.parentBuildingId,
              buildingType: this.currentbuildInfo.buildingType,
              buildingArea: this.currentbuildInfo.buildingArea,
              buildingPersons: this.currentbuildInfo.buildingPersons,
              co2Target: this.currentbuildInfo.co2Target,
              projectId: this.currentbuildInfo.projectId,
              customerId: this.$util.cookies.get("customer_id")
            })
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                  this.showInfo = true;
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    getMeterDataList() {
      this.$api.okhttp({
        url: this.$http.adornUrl("/ecs/ecsmeterinfo/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000000,
          customerId: this.$util.cookies.get("customer_id")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.meterInfoList = data.page.list;
        } else {
          this.meterInfoList = [];
        }
      });
    },
    closeMenuVisibledialog() {
      this.menuVisibledialog = false;
    },
    handleRightSelect(key) {
      this.menuSelected = key;
      if (key === "0") {
        // 添加选中节点的子节点
        this.menuVisible = false;
        this.addOrUpdateHandle("");
        // this.opmenuTitle='新建'
        // this.form.name='';
      }
      if (key === "1") {
        // 添加选中节点的子节点
        this.menuVisible = false;
        this.addOrUpdateHandle("");
        // this.opmenuTitle='新建'
        // this.form.name='';
      } else if (key === "2") {
        this.opmenuTitle = "修改";
        // 编辑节点
        this.menuVisibledialog = true;
        this.menuVisible = false;
        this.form.name = this.updateMenuNode.name;
      } else if (key === "3") {
        if (
          this.updateMenuNode.children &&
          this.updateMenuNode.children.length > 0
        ) {
          this.$message({
            message: "不能删除非叶子结点",
            type: "warning"
          });
          return;
        }
        var ids = [this.updateMenuNode.buildingId];
        // 删除节点
        this.$confirm("确认操作？", "提示", {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
          .then(action => {
            this.$api.okhttp({
              url: this.$http.adornUrl("/ecs/ecsbuildinginfo/delete"),
              method: "post",
              data: this.$http.adornData(ids, false)
            }).then((data) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataList();
                  }
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          })
          .catch(() => {});
      }
    },
    /**
     * 获取浏览器高度
     */
    getClientHeight() {
      let height = 0;
      if (window.innerHeight) {
        height = window.innerHeight;
      }
      if (document.body && document.body.clientHeight) {
        height = document.body.clientHeight;
      }
      if (
        document.documentElement &&
        document.documentElement.clientHeight &&
        document.documentElement.clientWidth
      ) {
        height = document.documentElement.clientHeight;
      }
      return height;
    },
    setContentHeight() {
      let height = this.getClientHeight();
      this.containerHeight = height - 140;
      this.treeHeight = height - 105;
    },
    // 鼠标右击，通过右键弹出菜单操作节点
    rightClick(event, object, flag) {
      this.updateMenuNode = object;
      // if (this.objectID !== object.id) {
      //   this.menuVisible = false
      // } else {
      this.menuVisible = true;
      // }
      document.addEventListener("click", e => {
        this.menuVisible = false;
      });
      let menu = document.querySelector("#rightClickMenu");
      // 菜单位置基于鼠标点击位置
      menu.style.left = event.clientX + "px";
      menu.style.top = event.clientY + "px";
      menu.style.position = "fixed";
      menu.style.width = "auto";
      menu.style.width = "auto";
      menu.style["z-index"] = "100";
    },
    selectBuild(data, node) {
      this.currentbuildInfo = data;
      this.currentNode = node;
      this.getmeterDataList(true);
    },
    getProjectDataList() {
      this.$api.okhttp({
        url: this.$http.adornUrl("/ecs/ecsprojectinfo/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000000,
          customerId: this.$util.cookies.get("customer_id")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.projectList = data.page.list;
        } else {
          this.projectList = [];
        }
      });
    },
    /**
     * 获取参数枚举
     */
    queryStatic(type) {
      this.$api.okhttp({
        url: this.$http.adornUrl("/sys/sysstaticdata/getList"),
        method: "get",
        params: this.$http.adornParams({
          code: type,
          customerId: this.$util.cookies.get("customer_id")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if (type === "METER_TYPE") {
            this.meterTypeList = data.page;
          } else if (type === "SUBITEM_TYPE") {
            this.subitemTypeList = data.page;
          } else if (type === "SUBITEM_VAL") {
            this.subitemValueList = data.page;
          } else if (type === "BUILDING_TYPE") {
            this.buildTypeList = data.page;
          }
        }
      });
    },
    // 获取数据列表
    getDataList (type) {
      if(type){
        this.pageIndex = 1
      }
      this.$api.okhttp({
        url: this.$http.adornUrl("/ecs/ecsbuildinginfo/select"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          customerId: this.$util.cookies.get("customer_id"),
          'projectid': this.$util.cookies.get("cuuren_projectId")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.dataList = treeDataTranslate(
            data.menuList,
            "buildingId",
            "parentBuildingId"
          );
        } else {
          this.dataList = [];
        }
      });
    },
    // 获取关联计量器数据列表
    getmeterDataList(flag) {
      if (!this.currentNode || this.currentNode === "") {
        this.$message({
          message: "请先选择区域",
          type: "warning"
        });
        return;
      }

      if(flag){
        this.pageIndex =1
      }
      this.dataListLoading = true;
      this.$api.okhttp({
        url: this.$http.adornUrl("/ecs/ecsbuildingmeter/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          buildingId: this.currentbuildInfo.buildingId,
          deviceName: this.dataForm.deviceName,
          meterCode: this.dataForm.meterCode,
          'projectId': this.$util.cookies.get("cuuren_projectId"),
          customerId: this.$util.cookies.get("customer_id")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if(data.page.list&&data.page.list.length>0){
            data.page.list.forEach(element => {
              let e = null;
              this.meterInfoList.forEach(ele=>{
                if(ele.meterCode==element.parentMeterCode){
                  e = ele;
                }
              })
              if(e){
                element.parentDevice = `${e.meterCode}[${e.meterName}]`;
              }
              else{
                element.parentDevice = '';
              }
            });
          }
          this.meterdataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.meterdataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getmeterDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getmeterDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(
          id,
          this.buildTypeList,
          this.projectList,
          this.updateMenuNode
        );
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.buildingId;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsbuildinginfo/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then((data) => {
          if (data && data.code === 0) {
        this.meterdataList=[]
        this.currentbuildInfo = {};
        this.currentNode = {};
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    // 新增 / 修改关联的计量器
    addOrUpdateHandlemeter(id) {
      if (!this.currentNode || this.currentNode === "") {
        this.$message({
          message: "请先选择区域",
          type: "warning"
        });
        return;
      }
      if (this.currentbuildInfo.buildingId === -1) {
        this.$message({
          message: "一级区域为虚拟结点不能绑定计量器",
          type: "warning"
        });
        return;
      }
      this.addOrUpdateVisiblemeter = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatemeter.init(
          id,
          this.subitemTypeList,
          this.subitemValueList,
          this.meterInfoList,
          this.currentbuildInfo
        );
      });
    },
    // 删除关联的计量器
    deleteHandlemeter(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsbuildingmeter/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then((data) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getmeterDataList(true);
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
<style>
.tree-area { background-color: rgba(0, 0, 0, 0.1);
  width: 200px !important;
  /* box-shadow: 0px 0px 2px 2px #f7f6f6; */
  padding-top: 10px;
  /* border: solid 1px #808080; */
}
.icon-building {
  background: url("../../assets/img/home.png");
  background-size: cover;
}
.bg-white {
  box-shadow: 0px 0px 2px 2px #f7f6f6;
}
.el-tree-node__content {
  height: 30px !important;
}
.menuItem {
  box-shadow: 0px 0px 2px 2px #f7f6f6;
  height: 40px;
  line-height: 40px;
}
.el-form-item{
  margin-top: 20px;
}
</style>
